import {
  Card,
  Table,
  Button,
  Col,
  Form,
  Icon,
  Modal,
  Row,
  message,
  Tooltip,
} from 'antd';
import React, { Component } from 'react';

import { Dispatch } from 'redux';
import { FormComponentProps } from 'antd/es/form';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { connect } from 'dva';
import { CompanyModelState } from '@/models/company';
import AddModal from './components/addModal';

import styles from './style.less';

interface TableListProps extends FormComponentProps {
  dispatch: Dispatch<any>;
  loading: boolean;
  company: CompanyModelState;
}

interface TableListState {
  modalVisible: boolean;
  updateModalVisible: boolean;
  selectedRows: string[];
  modelVisible: boolean;
}

interface TableListItem {
  cid: number
}

/* eslint react/no-multi-comp:0 */
@connect(
  ({
    company,
    loading,
  }: {
    company: CompanyModelState;
    loading: {
      models: {
        [key: string]: boolean;
      };
    };
  }) => ({
    company,
    loading: loading.models.company,
  }),
)
class TableList extends Component<TableListProps, TableListState> {
  state: TableListState = {
    modalVisible: false,
    updateModalVisible: false,
    selectedRows: [],
    modelVisible: false,
  };

  componentDidMount() {
    this.fetchCompany();
  }

  fetchCompany= () => {
    const { dispatch } = this.props;
    dispatch({
      type: 'company/fetch',
    });
  }

  handleSelectRows = (rows: string[]) => {
    this.setState({
      selectedRows: rows,
    });
  };

  handleAdd = (values: any) => {
    const { dispatch } = this.props;
    dispatch({
      type: 'company/add',
      payload: values,
      callback: () => {
        this.fetchCompany();
        this.handleModalVisible();
        message.success('添加成功');
      }
    });

    message.success('添加成功');
  };

  handleUpdate = () => {
    const { dispatch } = this.props;
    dispatch({
      type: 'company/update',
      payload: {

      },
    });

    message.success('配置成功');
  };

  handleDelete= (companyId: number) => {
    const { dispatch } = this.props;
    Modal.confirm({
      title: 'Confirm delete ？',
      onOk: () => {
        dispatch({
          type: 'company/delete',
          payload: {
            companyId
          },
        });
    
        message.success('删除成功');
      }
    })
  }

  handleModalVisible= (flag?: boolean) => {
    this.setState({
      modelVisible: !!flag
    })
  }

  render() {
    const {
      company: { data },
      loading
    } = this.props;
    const {
      modelVisible
    } = this.state;
    return (
      <PageHeaderWrapper>
        <Card bordered={false}>
          <Row
            gutter={{ md: 8, lg: 24, xl: 48 }}
            style={{ marginBottom: 24 }}>
            <Col
              style={{ float: 'right'}}>
              <Button
                type="primary"
                onClick={() => this.handleModalVisible(true)}>新增</Button>
            </Col>
          </Row>
          <div className={styles.tableList}>
            <Table
              rowKey='pid'
              columns={[{
                title: '保险公司',
                dataIndex: 'cname',
              }, {
                title: '描述',
                dataIndex: 'cdes',
                width: 400,
                render: val => <Tooltip title={val}>{val}</Tooltip>,
              }, {
                title: '创建时间',
                dataIndex: 'createdAt',
              }, {
                title: '更新时间',
                dataIndex: 'updatedAt',
              }, {
                title: '操作',
                render: (text, record: TableListItem) => <a onClick={() => this.handleDelete(record.cid)}><Icon type="delete" /> 删除</a>
              }]}
              loading={loading}
              dataSource={data}
              pagination={false} />
          </div>
        </Card>
        <AddModal
          modelVisible={modelVisible}
          handleModalVisible={this.handleModalVisible}
          handleAdd={this.handleAdd} />
      </PageHeaderWrapper>
    );
  }
}

export default Form.create<TableListProps>()(TableList);